<template>

    <view class="investment-options-container">
      <view class="title-area">
        <text class="main-title">退休投资事件选择</text>
        <text class="sub-title">以稳健为先，兼顾收益与安全～</text>
      </view>
      
      <!-- 投资选项列表 -->
      <view class="options-list">
        <view class="option-item green" @tap="openModal('insurance')">
          <view class="option-icon">
            <text>📄</text>
          </view>
          <text class="option-text">购买储蓄型保险</text>
          <text class="option-desc">稳健保本</text>
        </view>
        
        <view class="option-item blue" @tap="openModal('medical')">
          <view class="option-icon">
            <text>🏬</text>
          </view>
          <text class="option-text">投资某医疗公司</text>
          <text class="option-desc">成长性行业，波动较大需谨慎</text>
        </view>
        
        <view class="option-item yellow" @tap="openModal('fund')">
          <view class="option-icon">
            <text>💰</text>
          </view>
          <text class="option-text">购买货币基金</text>
          <text class="option-desc">流动性强，适合打理闲钱</text>
        </view>
        
        <view class="option-item orange" @tap="openModal('store1')">
          <view class="option-icon">
            <text>🏪</text>
          </view>
          <text class="option-text">收购店面</text>
          <text class="option-desc">实体经营回报不稳定，需投入管理</text>
        </view>
        
        <view class="option-item brown" @tap="openModal('store2')">
          <view class="option-icon">
            <text>📈</text>
          </view>
          <text class="option-text">降息红利</text>
          <text class="option-desc">利好存量，利空增量</text>
        </view>
        
        <view class="option-item gray" @tap="openModal('deposit')">
          <view class="option-icon">
            <text>🏦</text>
          </view>
          <text class="option-text">银行定期存款</text>
          <text class="option-desc">利率稳定的保守选择</text>
        </view>
      </view>
      <view class="bottom-note">
      <text>不同投资项目对应不同收益与风险，请谨慎选择～</text>
      </view>
      
      <!-- 自定义弹窗 -->
      <view v-if="showModal" class="modal-overlay">
        <view class="modal-content">
          <view class="modal-header">
            <text class="modal-title">投资信息</text>
            <text class="close-btn" @tap="closeModal">×</text>
          </view>
          <view class="modal-body">
            <view class="info-group">
              <text class="info-label">当前年龄：</text>
              <text class="info-value">{{ currentAge }} 岁</text>
            </view>
            <view class="info-group">
              <text class="info-label">当前储蓄：</text>
              <text class="info-value">{{ currentSavings }} 元</text>
            </view>
            <view class="input-group">
              <text class="input-label">本次投资金额：</text>
              <input 
                class="input-field" 
                type="digit" 
                placeholder="请输入投资金额" 
                :value="investmentAmount"
                @input="e => investmentAmount = e.detail.value"
              />
            </view>
          </view>
          <view class="modal-footer">
            <button class="simulate-btn" @tap="startSimulation">开始模拟</button>
          </view>
        </view>
      </view>
    </view>
</template>

<script>
import config from '../../config/api.js';
export default {
  data() {
    return {
      showModal: false,
      selectedOption: '',
      currentAge: '',
      currentSavings: '',
      investmentAmount: ''
    }
  },
  onLoad() {
    // 页面加载时获取当前年龄和储蓄信息
    this.fetchCurrentInfo();
  },
  methods: {
    // 获取当前用户信息
    fetchCurrentInfo() {
      uni.request({
        url: config.baseUrl + '/api/simulator/current',
        method: 'GET',
        header: {
          'Authorization': 'Bearer ' + uni.getStorageSync('token') || '',
          'Content-Type': 'application/json'
        },
        success: (res) => {
          if (res.data.code === 200) {
            this.currentAge = res.data.data.currentAge.toString();
            this.currentSavings = res.data.data.balance.toFixed(2);
          } else {
            console.error('获取用户信息失败:', res);
            uni.showToast({ title: '获取信息失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    },
    // 打开弹窗
    openModal(option) {
      this.selectedOption = option;
      // 重置输入框
      this.investmentAmount = '';
      // 打开弹窗
      this.showModal = true;
    },
    // 关闭弹窗
    closeModal() {
      this.showModal = false;
    },
    // 开始模拟
    startSimulation() {
      // 验证输入
      if (!this.currentAge || !this.currentSavings || !this.investmentAmount) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }
      
      if (parseInt(this.currentAge) < 18 || parseInt(this.currentAge) > 100) {
        uni.showToast({ title: '请输入有效年龄', icon: 'none' });
        return;
      }
      
      if (parseFloat(this.currentSavings) < 0 || parseFloat(this.investmentAmount) < 0) {
        uni.showToast({ title: '金额必须大于0', icon: 'none' });
        return;
      }
      
      // 事件ID映射
      const eventMap = {
        'store2': 1,         // 降息红利
        'insurance': 2,      // 购买储蓄型保险
        'bond': 3,           // 投资可转换债券
        'biotech': 4,        // 投资生物医药初创
        'crypto': 5,         // 杠杆投资加密货币
        'movie': 6,          // 投资影视制作项目
        'medical': 7,        // 投资某医疗公司
        'fund': 8,           // 购买货币基金
        'store1': 9,         // 收购店面
        'deposit': 10,       // 银行定期存款
        'realestate': 11,    // 投资房地产
        'privatebank': 12,   // 私人银行定期存款
        'techstock': 13,     // 投资科技成长股
        'newenergy': 14,     // 投资新能源产业
        'franchise': 15,     // 收购连锁品牌加盟店
        'overseas': 16,      // 收购海外新兴市场店面
        'privatebank2': 17,  // 私人银行定期存款
        'stock': 18          // 购买股票
      };
      
      // 准备发送到后端的数据
      const requestData = {
        eventId: eventMap[this.selectedOption],
        withdrawAmount: parseFloat(this.investmentAmount)
      };
      
      // 显示加载提示
      uni.showLoading({ title: '提交中...' });
      
      // 发送请求到后端
      uni.request({
        url: config.baseUrl + '/api/simulator/submit',
        method: 'POST',
        header: {
          'Authorization': 'Bearer ' + uni.getStorageSync('token') || '',
          'Content-Type': 'application/json'
        },
        data: requestData,
        success: (res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            // 准备传递给下一页的数据
            const resultData = {
              interestRate: res.data.data.annualInterestRate ? (res.data.data.annualInterestRate * 100).toFixed(2) + '%' : '0.00%',
              currentAge: res.data.data.currentAge || (res.data.data ? res.data.data.currentAge : 0),
              currentSavings: res.data.data.currentBalance || (res.data.data ? res.data.data.balance : 0),
              imgUrl: res.data.data.imgUrl,
              dead: res.data.data.dead || false,
              deathDescription: res.data.data.deathDescription || '',
              deathImage: res.data.data.deathImage || '',
              hasRetirementBonus: res.data.data.hasRetirementBonus || false // 添加这一行
            };
            
            // 根据年利率正负决定跳转页面
            const annualInterestRate = res.data.data.annualInterestRate || 0;
            if (annualInterestRate > 0) {
              // 跳转到interest页面
              uni.redirectTo({
                url: '/pages/simulator/interest?data=' + encodeURIComponent(JSON.stringify(resultData))
              });
            } else {
              // 跳转到reward页面
              uni.redirectTo({
                url: '/pages/simulator/reward?data=' + encodeURIComponent(JSON.stringify(resultData))
              });
            }
          } else {
            uni.showToast({ title: res.data.message || '提交失败', icon: 'none' });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          console.error('请求失败:', err);
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    }
  }
}
</script>

<style scoped>
/* 顶部渐变区域 */
.hero {
  height: 200rpx;
  background: linear-gradient(180deg, #E6F0FF 0%, #FFFFFF 100%);
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  position: relative;
}

.investment-options-container {
   position: relative;
  min-height: 100vh;
  background-color: #ffffff;
  background: linear-gradient(180deg, #E6F0FF 0%, #FFFFFF 100%);
  padding: 60rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-area {
  text-align: center;
  margin-bottom: 80rpx;
  margin-top: 60rpx;
}

/* 提示文字 */
.hint-text {
  text-align: center;
  font-size: 32rpx;
  color: #4A5568;
  line-height: 1.5;
  margin-bottom: 40rpx;
}

.options-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  padding: 10rpx;
}

.option-item {
  min-height: 180rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.option-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  z-index: 1;
}

.option-item:active {
  transform: translateY(8rpx) scale(0.98);
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
  opacity: 1;
}

.option-item.green  { background: linear-gradient(135deg, #f1fbf6 0%, #f7fefb 100%); color: #2D3748; }
.option-item.blue   { background: linear-gradient(135deg, #eff5ff 0%, #f6fbff 100%); color: #2D3748; }
.option-item.yellow { background: linear-gradient(135deg, #fff6e8 0%, #fffbf2 100%); color: #2D3748; }
.option-item.orange { background: linear-gradient(135deg, #fff1ea 0%, #fff7f1 100%); color: #2D3748; }
.option-item.brown  { background: linear-gradient(135deg, #fbf3e8 0%, #fff7ef 100%); color: #2D3748; }
.option-item.gray   { background: linear-gradient(135deg, #f5f3ff 0%, #fbf9ff 100%); color: #2D3748; }

.option-icon {
  display: flex;
  gap: 10rpx;
  margin-bottom: 15rpx;
  position: relative;
  z-index: 2;
}

.option-icon text {
  font-size: 40rpx;
  display: block;
}

.option-text {
  font-size: 32rpx;
  font-weight: 700;
  position: relative;
  z-index: 2;
  line-height: 1.4;
}

.main-title {
  font-size: 56rpx;
  font-weight: bold;
  color: #2D3748;
  margin-bottom: 20rpx;
  display: block;
}

.sub-title {
  font-size: 32rpx;
  color: #718096;
  line-height: 1.5;
}
.option-item {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.option-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.08), 0 5rpx 15rpx rgba(0, 0, 0, 0.03);
}

/* 图标轻微缩放（H5悬浮） */
.option-icon text {
  transition: transform 200ms ease;
}
.option-item:hover .option-icon text {
  transform: scale(1.06);
}

.option-item:active::after {
  transform: translateY(8rpx) scale(0.98);
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
  opacity: 1;
  animation: none;
}
@keyframes ripple {
  0% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(40); }
}

.bottom-note {
  margin-top: 55rpx;
  text-align: center;
  font-size: 28rpx;
  color: #718096;
  line-height: 1.6;
}
/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: #ffffff;
  border-radius: 30rpx;
  width: 85%;
  max-width: 700rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  align-items: center;
  align-items: center;
}

.close-btn {
  font-size: 50rpx;
  color: #999999;
  padding: 0 10rpx;
}

.close-btn:active {
  color: #666666;
}

.modal-body {
  padding: 30rpx;
}

.info-group {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 15rpx 20rpx;
  background-color: #f8f9fa;
  border-radius: 16rpx;
}

.info-label {
  font-size: 32rpx;
  color: #333333;
  width: 200rpx;
}

.info-value {
  flex: 1;
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.input-label {
  font-size: 32rpx;
  color: #333333;
  width: 200rpx;
}

.input-field {
  flex: 1;
  height: 80rpx;
  border: 2rpx solid #E0E0E0;
  border-radius: 16rpx;
  padding: 0 20rpx;
  font-size: 32rpx;
  background: #FAFAFA;
}

.input-field:focus {
  border-color: #4299E1;
  background: #FFFFFF;
}

.modal-footer {
  padding: 0 30rpx 30rpx;
}

.simulate-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #4299E1 0%, #3182CE 100%);
  color: white;
  font-size: 34rpx;
  font-weight: 600;
  border-radius: 16rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(66, 153, 225, 0.3);
}

.simulate-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(66, 153, 225, 0.2);
}

.simulate-btn::after {
  border: none;
}
</style>